<template>
  <el-header>
    <h2 style="font-family: '宋体',sans-serif;text-align: center">{{ neirong.name }}</h2>
    <p style="font-family: 宋体,sans-serif;font-size: 18px;text-align: center">实验要求: {{neirong.content}}</p>
  </el-header>
  <el-main>
    <div style="margin-top: 20px">
      <span>开放时间:&nbsp;  </span> <span>{{ neirong.creatTime }} <br/></span>
      <span>截止时间:&nbsp; </span> <span>{{ neirong.deadline }}<br/></span>
      <h4 style="padding-top:50px">提交草稿</h4>
    </div>
    <UploadFile/>
  </el-main>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import {shiyanStore} from "@/store";
import axios from "axios";
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import UploadFile from "@/components/UploadFile.vue"

const upload = ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}

const submitUpload = () => {
  upload.value!.submit()
}

const value = ref(new Date())
const store = shiyanStore()

const neirong = ref({})
const loadone = () => {
  axios.get('/experiment/'+ store.id)
      .then(function(res){
        neirong.value = res.data.data.data
        console.log(res.data.data.data)
      })
}

onMounted(async () => {
  loadone()
})

</script>

<style scoped>
.el-button{
  margin: 10px;
}
.side-column {
  height: 100%;

}

p {
  font-size: 14px;
}

span {
  font-family: "Microsoft YaHei",serif;
  font-weight: bold;
  color: #99a9bf;
  margin: 10px;
  text-align: center;
  margin-left: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
  margin: 10px 20px;
}

.notice {
  margin-left: 20px;
}

</style>